<template>
	<div class="index">
		<div style="margin-bottom: 4vw;">
			<van-nav-bar
			  title="分页列表"
			/>
		</div>
		<ul>
			<li v-for="item in page_list.list" :key="item.lid">{{item.title}}</li>
		</ul>
		<van-pagination v-model="param.pageNum" :total-items="40" :page-count="page_count" :show-page-size="page_count < 5 ? page_count : 5" force-ellipses @change="pagechange">
		  <template #prev-text>
		    <van-icon name="arrow-left" />
		  </template>
		  <template #next-text>
		    <van-icon name="arrow" />
		  </template>
		  <template #page="{ text }">{{ text }}</template>
		</van-pagination>

	</div>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance,onBeforeUpdate,onBeforeMount} from 'vue'
	import {findlist} from '../../api/list.js'
	let { proxy } = getCurrentInstance();
	const _this = proxy
	let page_list = reactive({
		list:[]
	})
	const page_count = ref(0)	//总页数
	
	const param = reactive({
		pageNum:1,	//pageNum
		pageSize: 30,//每页个数
		keyword:''
	})
	
	let pagechange = (e)=>{
		_this.param.pageNum = e
		getList(_this.param)
	}
	
	const getList = async (param)=>{
		await findlist(param).then(res=>{
			_this.page_list.list=res.data.records
			_this.page_count = res.data.pages
		})
	}
	
	onBeforeMount(()=>{getList(_this.param)})
</script>

<style>
</style>